import 'package:auto_route/auto_route.dart';
import 'package:distribution_mall_flutter/constant/cf_constant.dart';
import 'package:distribution_mall_flutter/constant/constant.dart';
import 'package:distribution_mall_flutter/constant/point_constant.dart';
import 'package:distribution_mall_flutter/entity/order/detail/order_detail_entity.dart';
import 'package:distribution_mall_flutter/generated/l10n.dart';
import 'package:distribution_mall_flutter/pages/pay/pay_list/pay_list_provider.dart';
import 'package:distribution_mall_flutter/provider/common/pay.dart';
import 'package:distribution_mall_flutter/provider/order/order_detail.dart';
import 'package:distribution_mall_flutter/router/route_utils.dart';
import 'package:distribution_mall_flutter/utils/common_widget.dart';
import 'package:distribution_mall_flutter/utils/firebase/firebase_analytics_utils.dart';
import 'package:distribution_mall_flutter/router/router.gr.dart';
import 'package:distribution_mall_flutter/utils/utils.dart';
import 'package:distribution_mall_flutter/widgets/modal_pay.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:skeletonizer/skeletonizer.dart';
import 'package:slide_countdown/slide_countdown.dart';

@RoutePage()
class PayListPage extends ConsumerStatefulWidget {
  final String distributionOrderId;

  // final String paymentType;
  const PayListPage({
    super.key,
    @pathParam required this.distributionOrderId,
    // required this.paymentType
  });

  @override
  createState() {
    return _PayListPage();
  }
}

class _PayListPage extends ConsumerState<PayListPage> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      ref
          .read(orderDetailProvider.notifier)
          .getOrderDetail(widget.distributionOrderId)
          .then((bol) {
        if (!bol) return;
        OrderDetailEntity? detail = ref.watch(orderDetailProvider).detal;
        if (detail == null) return;
        ref.read(payListProvider.notifier).getPayList(
            totalAmount: detail.amount?.totalAmount, isCanCod: detail.isCanCod);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    ref.watch(payListProvider);
    OrderDetailEntity? detail =
        ref.watch(orderDetailProvider.select((value) => value.detal));
    int getTimeDiffernce = ref
        .watch(orderDetailProvider.select((value) => value.getTimeDiffernce));
    PayMethodInfo? selectPayMethod = ref.watch(selectPayMethodProvider);
    return Scaffold(
        appBar: AppBar(
          scrolledUnderElevation: 0,
          backgroundColor: Colors.white,
          title: Skeleton.ignore(child: Text(S.current.payment_method)),
          centerTitle: true,
          leading: Skeleton.ignore(
              child: Padding(
            padding: const EdgeInsets.only(left: 16),
            child: CommonBtnWidget.arrowBack(),
          )),
        ),
        bottomNavigationBar: Container(
            width: double.infinity,
            height: 110,
            padding: const EdgeInsets.fromLTRB(10, 15, 10, 5),
            decoration: const BoxDecoration(
                border: Border(
                    top: BorderSide(
                        width: 0.9,
                        color: Color.fromRGBO(221, 221, 221, 0.5)))),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      S.current.pay_within,
                      style: const TextStyle(
                          color: Color.fromRGBO(255, 0, 0, 1),
                          fontSize: 14,
                          letterSpacing: TextConstant.letterSpacing),
                    ),
                    ConstrainedBox(
                      constraints:
                          const BoxConstraints(minWidth: 100, maxWidth: 200),
                      child: SlideCountdown(
                        onDone: () {
                          if (detail?.paymentDeadline != null) {
                            RouteUtils.back();
                          }
                        },
                        separatorStyle: const TextStyle(
                            color: Color.fromRGBO(255, 0, 0, 1),
                            fontWeight: FontWeight.bold),
                        duration: Duration(seconds: getTimeDiffernce),
                        decoration: const BoxDecoration(color: Colors.white),
                        style: const TextStyle(
                            color: Color.fromRGBO(255, 0, 0, 1),
                            fontSize: 14,
                            letterSpacing: TextConstant.letterSpacing),
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 10,
                ),
                CommonBtnWidget.generalBtn(
                    selectPayMethod != null
                        ? () {
                            appRouter.replace(PayLoadingRoute(
                                distributionOrderId: widget.distributionOrderId,
                                skipCodFree: true,
                                paymentType:
                                    selectPayMethod.paymentMethod.methodCode!,
                                receiptPaymentId: detail?.payment?.unPayList?[0]
                                        .receiptPaymentId ??
                                    ''));
                            FirebaseAnalyticsUtils.logEvent(
                                name: PointConstant.payPay,
                                parameters: {
                                  'orderNo': widget.distributionOrderId,
                                  'paymentMethod':
                                      selectPayMethod.paymentMethod.methodCode
                                });
                          }
                        : null,
                    height: 40,
                    text: S.current.order_status_to_pay,
                    fullWidthButton: true)
              ],
            )),
        body: Column(
          children: [
            Container(
                margin: const EdgeInsets.only(top: 40),
                child: Column(
                  children: [
                    Text(
                      S.current.pay_amount,
                      style: const TextStyle(
                          color: ColorConstant.black51,
                          fontWeight: FontWeight.bold,
                          fontSize: FontConstant.f24),
                    ),
                    Padding(
                        padding: const EdgeInsets.only(top: 14),
                        child: Utils.currencyWidget(detail?.amount?.totalAmount,
                            mainAxis: MainAxisAlignment.center,
                            commonStyle: const TextStyle(
                                fontSize: 28,
                                fontWeight: FontWeight.bold,
                                color: Color.fromRGBO(227, 50, 11, 1))))
                  ],
                )),
            Expanded(
                child: Container(
                    alignment: Alignment.center,
                    margin: const EdgeInsets.only(top: EdgeConstant.edge10),
                    child: const SingleChildScrollView(
                      child: PayListItem(),
                    )))
          ],
        ));
  }
}
